﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="mapex._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="map-easyui/jquery-1.11.1.js"></script>
    <script src="map-easyui/jquery.easyui.min.js"></script>
    <script src="map-easyui/locale/easyui-lang-zh_CN.js"></script>
    <link href="map-easyui/themes/default/easyui.css" rel="stylesheet" />

    <script type="text/javascript">
        $(function () {
            var iframe = document.getElementById("demo");
            var menuTree = $("#menuTree").tree({
                lines: true,
                onSelect: function (node) {
                    if (node.url) {
                        switch (node.text) {
                            default: {
                                $("#tabs").tabs("select", "演示");
                                break;
                            }
                        }

                        iframe.src = node.url;
                    }
                },
                onClick: function (node) {
                    var that = $(this);
                    if (!node.url) {
                        //展开关闭节点
                        that.tree(node.state == "open" ? "collapse" : "expand", node.target);
                    }
                    //打开API文档
                    var tbs = $("#tabs");
                    if (node.attributes && node.attributes.type == "api") {
                        if (tbs.tabs("getTab", node.attributes.typeValue)) {
                            //存在则选中
                            tbs.tabs("select", node.attributes.typeValue);
                        } else {
                            //不存在则新打开
                            tbs.tabs("add", {
                                title: node.attributes.typeValue,
                                style: 'display: block;',
                                closable: true,
                                content: '<iframe style="height: 100%; width: 100%; display: block;" src="api/MainView.aspx?control=' + node.attributes.typeValue + '"></iframe>'
                            });
                        }
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div class="easyui-layout">
        <div data-options="region:'west',split:true" title="参考手册" style="width: 200px;">
            <ul id="menuTree">
                <!--DEMO-->
                <li>
                    <span>功能演示</span>
                    <ul>
                        <li data-options="state:'closed'">
                            <span>AppGridMenu</span>
                            <ul>
                                <li data-options="url:'demo/AppGrid/BasicAppGrid.aspx'">
                                    <span>基础菜单</span>
                                </li>
                            </ul>
                        </li>
                        <li data-options="state:'closed'">
                            <span>AppGrid</span>
                            <ul>
                                <li data-options="url:'demo/AppGrid/BasicAppGrid.aspx'">
                                    <span data-options="url:'demo/AppGrid/BasicAppGrid.aspx'">基础列表</span>
                                </li>
                            </ul>
                        </li>
                        <li data-options="state:'closed'">
                            <span>AppForm</span>
                            <ul>
                                <li>
                                    <span data-options="url:'http://git.oschina.net/duyibo/mapex'">基础表单</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>

                <!--API-->
                <li>
                    <span>API文档</span>
                    <ul>
                        <li data-options="attributes:{type:'api',typeValue:'AppGridMenu'}">
                            <span>AppGridMenu</span>
                        </li>
                        <li data-options="attributes:{type:'api',typeValue:'AppGrid'}">
                            <span>AppGrid</span>
                        </li>
                        <li data-options="attributes:{type:'api',typeValue:'AppForm'}">
                            <span>AppForm</span>
                        </li>
                    </ul>
                </li>

            </ul>
        </div>
        <div data-options="region:'center'" style="overflow: hidden">
            <div id="tabs" class="easyui-tabs" data-options="fit:true">
                <div title="演示" style="display: block;">
                    <iframe id="demo" style="height: 100%; width: 100%; display: block;" src="blank.html"></iframe>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
